<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>login</title>
<link rel="stylesheet" type="text/css" href="../../css/index.css" />

<style media="screen">
	html,body{background: #f5f5f5;}

	.info-box{box-sizing: border-box;width: 100%;flex-direction: column;position: fixed;top: 0;left: 0;right: 0;bottom: 0;}
	.info-one{height: 50px;align-items:center;flex-shrink: 0;overflow: hidden;width: 100%;background: #ffffff;padding: 0 15px;box-sizing: border-box;}
	.info-one .input-box{overflow: hidden;}
	.info-one input{padding: 10px;box-sizing: border-box;width: 100%;color: #333333;}
	.info-one .code{width: 74px;height: 28px;background: #ffffff;text-align: center;line-height: 28px;font-size: 12px;color: #FF9502;flex-shrink: 0;border: 1px solid #FF9502;border-radius: 4px;box-sizing: border-box;}
	.info-one .lf{line-height: 50px;width: 60px;flex-shrink: 0;}
	.login-btn{height:45px;flex-shrink: 0;background:#FF9502;border-radius:4px;text-align: center;line-height: 45px;color: #FFFFFF;font-size: 18px;margin: 40px 15px;}

</style>
</head>
<body>
	<div id="vue">
		<!--原手机号-->
		<div class="info-box flex" v-if="sta == 0">
			<div class="info-one flex border-bottom">
				<div class="lf">原手机号</div>
				<div class="flex1 input-box">
					<input type="tel" maxlength="11" name="yphone" id="yphone" disabled v-model="udata.phone_hide">
				</div>
			</div>
			<div class="info-one flex">
				<div class="lf">验证码</div>
				<div class="flex1 input-box">
					<input type="tel" maxlength="6" name="ycode" id="ycode" placeholder="请输入您的验证码">
				</div>
				<div class="code" tapmode onclick="getCodeClick(this)">获取验证码</div>
			</div>
			<div class="login-btn" tapmode onclick="next()">下一步</div>
		</div>
		<!--新手机号-->
		<div class="info-box flex" v-if="sta == 1">
			<div class="info-one flex border-bottom">
				<div class="lf">新手机号</div>
				<div class="flex1 input-box">
					<input type="tel" maxlength="11"  name="xphone" id="xphone" placeholder="输入手机号">
				</div>
			</div>
			<div class="info-one flex">
				<div class="lf">验证码</div>
				<div class="flex1 input-box">
					<input type="tel" name="xcode" id="xcode" placeholder="请输入您的验证码">
				</div>
				<div class="code" tapmode onclick="getCodeClick(this)">获取验证码</div>
			</div>
			<div class="login-btn" tapmode onclick="okHuanPhone()">完成</div>
		</div>

	</div>
</body>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	var ydata = {};
	var xdata = {};
	define(function (require, exports, module) {

		setData = function () {
			var udata = lanYun.getUdata();
			lanYun.vue.udata = udata;
		};
		lanYun.newVue('#vue',{
			udata:{},
			sta:0
		},function() {

		});
		setData();

		//下一步
		next = function (){
			ydata.phone = lanYun.vue.udata.phone;
			ydata.code = $('#ycode').val();
			if(!ydata.code) {
				lanYun.toast('请输入短信验证码');
				return;
			}
			lanYun.post('user/editPhoneck', ydata ,function (ret) {
				//console.log(JSON.stringify(ret));
	            if(ret.errcode == 0){
	                lanYun.toast(ret.msg);
					xdata.ckcode = ret.ckcode;
	                lanYun.vue.sta = 1;
					clearTimeout(lanYun.timeout);
	            }else{
	                lanYun.toast(ret.msg);
	            }
	        },2);
		}

		// 提交更换的手机信息
		okHuanPhone = function (){
			xdata.phone = $('#xphone').val();
			xdata.code = $('#xcode').val();
			if(!xdata.code) {
				lanYun.toast('请输入短信验证码');
				return;
			}
			//console.log(JSON.stringify(xdata));
			lanYun.post('user/editPhone', xdata ,function (ret) {
				//console.log(JSON.stringify(ret));
	            if(ret.errcode == 0){
					lanYun.toast('修改成功');
					lanYun.setStorage('reshpage',1);
					lanYun.updateUdata(ret.data, 1);
					clearTimeout(lanYun.timeout);
					api.closeWin()
	            }else {
	            	lanYun.toast(ret.msg);
	            }
	        },2);
		}

		//获取验证码
		getCodeClick = function (tis) {
			if($(tis).hasClass('on')){
				return;
			}
			var data = {type : 'editphone'};
			if(lanYun.vue.sta == 0){
				data.phone = lanYun.vue.udata.phone;
			}else {
				data.phone = $('#xphone').val();
			}
			if(!TOOL.check.isMobile(data.phone)){
				lanYun.toast('请输入正确的手机号');
				return;
			}
			//console.log(JSON.stringify(data));
			lanYun.post('send/getcode', data ,function (ret) {
				//console.log(JSON.stringify(ret));
				if(ret.errcode == 0){
					lanYun.toast(ret.msg);
					lanYun.setWait(tis);
				}else{
					lanYun.toast(ret.msg);
				}
			},2);
		};

	});

</script>
</html>
